import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/topBarOrder.css';
export default class Order extends Component {
    constructor(){
        super()
        this.state={
            cartList:[]
        }
    }
    componentDidMount(){
       
        if(this.props.location.state){
            let arr=JSON.parse(JSON.stringify(this.props.location.state.cart))
            console.log(arr);
            localStorage.setItem("copy",JSON.stringify(arr))
            console.log(JSON.parse(localStorage.getItem("copy")));
        }
        let cart=localStorage.getItem("copy")?JSON.parse(localStorage.getItem("copy")):[]
        this.setState({cartList:cart})
        // console.log(this.state.cartList);
    }
    toBack(){
        this.props.history.push("/index/cart")
    }

    total(){
        let priceAll=0
        this.state.cartList.forEach(item=>{
            priceAll+=item.num*item.price
        })
        return priceAll.toFixed(2)
    }
    render() {
        const {cartList}=this.state
        console.log(cartList);
        return (
            <>
                  <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.toBack()}
                >确认订单</NavBar>
                <header>
                    <section>
                        <p>代用名 188 **** 8888</p>
                        <p>北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室</p>
                    </section>
                </header>

                {/* <!-- 主要展示区 --> */}
                <div className="brand-order">
                    <div className="first">
                        <div className="l">
                            <i className="iconfont icon-jiarugouwuche"></i>
                            <span>品牌精选</span>
                        </div>
                        <div className="r">
                            <span className="bdr-shu">已免运费</span>
                            <span className="red-wz">领券</span>
                        </div>
                    </div>


                    {
                        cartList.map((item,index)=>(
                            <div className="second" key={index}>
                            <img src={this.$pregImg+item.img} alt="" />
                            <div className="r2">
                                <p>{item.goodsname}</p>
                                <p>
                                    <span>&yen; {item.price}</span>
                                    <span>x{item.num}</span>
                                </p>
                                <div className="r2-b">
                                    <div className="bar1">7天无理由退货</div>
                                    <div className="bar2">特价</div>
                                </div>
                            </div>
                        </div>
    
                        ))
                    }
              
                    <div className="third">
                        <span className="type">发票类型</span>
                        <div className="third-r">
                            <span>不开发票</span>
                            <i className="iconfont icon-icon"></i>
                        </div>
                    </div>

                    <div className="fourth">
                        <span>售后免邮</span>
                        <span>部分商家赠送</span>
                    </div>

                    <div className="fourth">
                        <span>买家留言</span>
                        <span>填写内容需要与商家协商并确认，45字以内</span>
                    </div>

                </div>

                {/* <!-- 下面的详情 --> */}
                <div className="order-detail">
                    <div className="row1">
                        <span>商品金额</span>
                        <span className="grey">&yen;{this.total()}</span>
                    </div>
                    <div className="row1">
                        <span>优惠活动</span>
                        <span className="grey2">&yen;0</span>
                    </div>
                </div>

                {/* <!-- 固定导航栏 --> */}
                <div className="nav-fix">
                    <div className="inner">
                        <div className="top">
                            <a href="">
                                <span className="sum">合计</span>
                                <span className="gray">已免运费</span>
                            </a>
                            <a href="" className="a2">
                                <span className="red-big">&yen;{this.total()}</span>
                                <span className="gray">已优惠&yen;0元</span>
                            </a>

                            <form action="">
                                <input type="button" value="加入购物车" className="input1" style={{visibility: "hidden"}} />
                                <input type="button" value="确认订单" className="input2" />
                            </form>
                        </div>

                    </div>

                </div>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
             
            </>
        )
    }
}
